<template>
  <div class="group">
    <p class="title" v-show="groupList && groupList.length">我的群组</p>
    <ul class="groupList" v-show="groupList && groupList.length">
      <li v-for="item in groupList" :key="item.group_id" @dblclick="jumpToChat(item)">
        <div class="avatarBox">
          <avatar :imgID="item.group_img" :fileType="6" :id="item.group_id"></avatar>
        </div>
        <div class="groupInfo">
          <p class="groupName">{{ item.group_name }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    groupList () {
      return this.$store.state.addressList.groupList
    }
  },
  methods: {
    // 获取群组列表
    getGroupList () {
      this.$store.dispatch('addressList/getGroupList')
    },
    // 跳转到聊天
    jumpToChat (item) {
      this.$store.commit('chatInformation/set_topContact', {
        id_type: 2,
        timestamp: +new Date(),
        messages: [],
        id: item.group_id,
        name: item.group_name,
        draft: ''
      })
      this.$store.commit('chatInformation/set_current_contact', {
        id: item.group_id,
        id_type: 2
      })
      this.$router.push('/message')
    }
  },
  created () {
    this.getGroupList()
  }
}
</script>

<style scoped lang="scss">
.group {
  padding: 10px 20px 0;
  .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #EBEDF3;
    font-size: 14px;
    color: #2E3F64;
    margin-bottom: 8px;
  }
  .groupList {
    margin: 0 -20px 11px;
    li {
      height: 56px;
      padding: 0 20px;
      position: relative;
      cursor: pointer;
      .avatarBox {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        height: 40px;
        width: 40px;
        .avatar {
          border-radius: 0;
        }
      }
      .groupInfo {
        position: absolute;
        top: 8px;
        left: 72px;
        .groupName {
          color: #0D172C;
          font-size: 14px;
          margin-bottom: 3px;
        }
        .count {
          color: #5F7196;
          font-size: 12px;
        }
      }
      &:hover {
        background-color: rgba(48,78,236,0.05);
      }
    }
  }
}
</style>
